<template>
  <vue-scroll class="login-page align-vertical">
    <div class="form-wrapper align-vertical-middle">
      <div class="form-box card-base card-shadow--extraLarge">
        <img class="image-logo" src="@/assets/images/logo.svg" alt="logo" />

        <float-label class="styled">
          <input
            name="email"
            type="email"
            v-validate="'required'"
            data-vv-as="邮箱"
            placeholder="邮箱"
            v-model.trim="email"
            autocomplete="off"
          />
          <span class="error">{{ errors.first('email') }}</span>
        </float-label>

        <float-label class="styled">
          <input
            type="password"
            v-validate="'required'"
            data-vv-as="密码"
            placeholder="密码"
            v-model.trim="password"
          />
          <span class="error">{{ errors.first('password') }}</span>
        </float-label>

        <div class="flex">
          <div class="box grow">
            <el-checkbox>记住我</el-checkbox>
          </div>
          <div class="box grow text-right">
            <router-link to="/forgotpassword">忘记密码?</router-link>
          </div>
        </div>

        <div class="flex text-center center pt-30 pb-10">
          <el-button size="small" @click="login" :loading="loading" class="login-btn">登录</el-button>
        </div>
        <div class="text-center signin-box pt-20">
          还没有账号?
          <a href="/register">注册</a>
        </div>
      </div>
    </div>
  </vue-scroll>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      email: "",
      password: "",
 
      loading: false
    };
  },
  methods: {
    login() {
      this.loading = true;
      this.$validator.validate().then(valid => {
        if (!valid) {
          return;
        } else {
          this.$store
            .dispatch("login", { email: this.email, password: this.password })
            .then(response => {
              this.email = null;
              this.password = null;
              this.loading = false;
              if (this.$route.query.redirect) {
                this.$store.push(this.$route.query.redirect);
              } else {
                this.$router.push("dashboard");
              }
            })
            .catch(error => {
              this.loading = false;
       
            });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../assets/scss/_variables";

.login-page {
  background: $text-color;
  margin-left: -30px;
  margin-right: -30px;
  input:-internal-autofill-selected {
    -webkit-text-fill-color: #807c7c !important;

    transition: background-color 5000s ease-out 0.5s !important;
  }
  input {
    font-size: 12px !important;
  }
  .error {
    color: #f56c6c;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
  }
  .form-wrapper {
    width: 100%;
  }

  .form-box {
    width: 100%;
    max-width: 340px;
    padding: 30px;
    box-sizing: border-box;
    margin: 20px auto;

    a {
      font-size: 14px;
      color: $text-color-accent;
      text-decoration: none;
      font-weight: 500;
    }

    .image-logo {
      width: 80px;
      margin: 0px auto;
      margin-bottom: 30px;
      display: block;
    }
    .login-btn {
      width: 160px;
      background: rgba($text-color-accent, 0.2);
      color: $text-color;
      border-color: $text-color;
      border-width: 2px;
      font-weight: bold;
      border-radius: 0;

      &:hover {
        background: rgba($text-color-accent, 0.4);
        border-color: $text-color;
        color: $text-color;
      }
    }

    .signin-box {
      font-size: 14px;
    }
  }
}

@media (max-width: 768px) {
  .layout-container .container .view.login-page {
    margin-left: -5px;
    margin-right: -5px;
    max-width: calc(100% + 10px);
  }
}
</style>
